<!--  -->
<template>
  <div class="rendting">
    <div class="header">
      <van-icon name="arrow-left" size="18" @click="goBack()" />
      <p>租&nbsp;&nbsp;房</p>
      <span></span>
    </div>
    <div class="content">
      <div class="search">
        <select name="" id="">
          <option value="">北京</option>
          <option value="">上海</option>
          <option value="">深圳</option>
        </select>
        <van-search
          v-model="search"
          placeholder="请在这里输入区域/商圈"
          @search="onSearch"
          right-icon="search"
          left-icon=""
        />
        <p @click="gofindHome()">地图找房</p>
      </div>
      <div class="menus">
        <ul>
          <li>
            <img src="../../assets/找商铺.jpg" alt="" />
            <p>找商铺</p>
          </li>
          <li>
            <img src="../../assets/找写字楼.jpg" alt="" />
            <p>找写字楼</p>
          </li>
          <li>
            <img src="../../assets/找小区.jpg" alt="" />
            <p>找小区</p>
          </li>
        </ul>
      </div>
      <div class="classify">
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            @change="changeAddress(value1)"
          />
          <van-dropdown-item v-model="value2" :options="option2" />
          <van-dropdown-item v-model="value3" :options="option3" />
          <van-dropdown-item
            v-model="value4"
            :options="option4"
            @change="changeType(value4)"
          />
        </van-dropdown-menu>
      </div>
      <div class="list">
        <dl
          v-for="(item, idx) in list"
          :key="idx"
          class="resoldList"
          @click="goresoldDetail(item)"
        >
          <dt><img :src="item.img" alt="" /></dt>
          <dd>
            <p>{{ item.title }}</p>
            <p>43平/2室 1厅/远洋新天地</p>
            <p>
              <span>{{ item.price }}万</span>
              <span>{{ item.num }}/m²</span>
            </p>
            <van-tag color="#ccc" text-color="#000" size="medium">小区</van-tag>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "../../components/Search.vue";
import { mapActions } from "vuex";
import { getResoldList } from "@/api";
export default {
  components: {
    Search,
  },
  // 组件状态值
  data() {
    return {
      list: [],
      post: [],
      search: "",
      value1: "区域",
      value2: "a",
      value3: 0,
      value4: "筛选",
      option1: [
        { text: "区域", value: "区域" },
        { text: "上海", value: "上海" },
        { text: "杭州", value: "杭州" },
        { text: "北京", value: "北京" },
      ],
      option2: [
        { text: "价钱", value: "a" },
        { text: "≤10万", value: "b" },
        { text: "20万-30万", value: "c" },
        { text: "30万-50万", value: "d" },
        { text: "50万-100万", value: "e" },
        { text: "≥1000万", value: "f" },
      ],
      option3: [
        { text: "户型", value: 0 },
        { text: "1室", value: 1 },
        { text: "2室", value: 2 },
        { text: "3室", value: 3 },
      ],
      option4: [
        { text: "筛选", value: "筛选" },
        { text: "东", value: "东" },
        { text: "西", value: "西" },
        { text: "南", value: "南" },
        { text: "北", value: "北" },
      ],
    };
  },
  // 计算属性
  computed: {},
  // 组件方法
  methods: {
    ...mapActions(["getResoldList"]),
    //返回上一级
    goBack() {
      this.$router.push("/homePage");
    },
    //搜索
    onSearch(search) {
      // this.getResoldList(search);
    },
    //跳转到地图找房页面
    gofindHome() {
      this.$router.push("/findHome");
    },
    //跳转到区域筛选页面
    goArea() {
      this.$router.push("/area");
    },
    //跳转到价格筛选页面
    goPrice() {
      this.$router.push("/price");
    },
    //跳转到户型筛选页面
    gohouseType() {
      this.$router.push("/houseType");
    },
    //跳转到户型筛选页面
    gohouseType() {
      this.$router.push("/houseType");
    },
    //跳转到户型筛选页面
    goScreen() {
      this.$router.push("/screen");
    },
    //跳转到详情页页面
    goresoldDetail(item) {
      this.$router.push(`/resoldDetail/${item.id}`);
    },
    async getList() {
      const res = await getResoldList();
      console.log(res);
      this.post = res.data.data;
      this.list = res.data.data;
    },
    //筛选方向
    changeType(values) {
      this.list = this.post.filter((item) => item.type.includes(values));
    },
    //筛选地区
    changeAddress(values) {
      // if(this.list===)
      console.log(values);
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getList();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.rendting {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  color: #fff;
  background: #4381e6;
  padding: 0 15px;
}
.content {
  flex: 1;
  overflow: auto;
}
.search {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  .van-search__content {
    border: 1px solid #ddd;
  }
  select {
    width: 55px;
    border: 0;
    outline: 0;
  }
  p {
    font-size: 15px;
  }
}
.menus {
  width: 100%;
  ul {
    display: flex;
    margin-top: 10px;
    li {
      width: 33%;
      text-align: center;
      img {
        width: 35px;
        margin-bottom: 5px;
      }
    }
  }
}
.classify {
  width: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-top: 10px;
  ul {
    display: flex;
    justify-content: space-around;
    line-height: 40px;
    .van-icon {
      margin-left: 3px;
    }
    li:hover {
      color: orange;
    }
  }
}
.list {
  width: 100%;
  height: 100%;
  .resoldList {
    width: 100%;
    display: flex;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 20px;
    margin: 10px 0;
    line-height: 20px;
    img {
      width: 100px;
      height: 81px;
      margin-right: 5px;
      // border: 1px solid #000;
    }
    p:nth-child(1) {
      font-weight: bold;
    }

    p:nth-child(2) {
      font-size: 12px;
    }
    p:nth-child(3) {
      span:nth-child(1) {
        color: orange;
        margin-right: 10px;
      }
    }
  }
}
</style>
